import { onMounted, onUnmounted } from "vue"
import _ from "lodash"

interface IScreenSize {
  targetX: number
  targetY: number
  targetRatio: number
}

/**
  大屏适配的 hooks
 */
export default function useScalePage(option: IScreenSize) {
  // 加了节流
  const resizeFunc = _.throttle(function () {
    triggerScale() // 动画缩放网页
  }, 100)

  onMounted(() => {
    triggerScale() // 动画缩放网页
    window.addEventListener("resize", resizeFunc)
  })

  onUnmounted(() => {
    window.removeEventListener("resize", resizeFunc) // 释放
  })

  // 大屏的适配(1530*703)
  function triggerScale() {
    // 1.设计稿的尺寸
    const targetX = option.targetX || 1920
    const targetY = option.targetY || 1080
    const targetRatio = option.targetRatio || 16 / 9 // 宽高比率

    // 2.拿到当前设备(浏览器)的宽度
    /**
     * 处理页面响应式时，由于浏览器的默认行为（比如快速切换屏幕，来回启用控制台）
     * 或者一些特殊情况（比如开启全屏，然后退出全屏）
     * 会导致浏览器的 API 返回的尺寸数据不准确导致的误差。
     * > 使用window.innerWidth 和 window.innerHeight来获取当前窗口的宽度和高度，更稳定和准确
     */
    // const currentX = document.documentElement.clientWidth || document.body.clientWidth
    const currentX = window.innerWidth
    // const currentY = document.documentElement.clientHeight || document.body.clientHeight
    const currentY = window.innerHeight

    // 3.计算缩放比例
    /* 数对计算得到的缩放比例进行向下取整。这样可以确保页面缩放的倍数为整数，避免出现微小的误差 */
    const scaleRatioByX = currentX / targetX // 参照宽度进行缩放 ( 默认情况 )
    const scaleRatioByY = currentY / targetY // 参照高度进行缩放
    const currentRatio = currentX / currentY // 当前屏幕宽高比率

    // 超宽屏（当前屏幕宽高比大于设计稿宽高比 --> 即为宽屏）
    if (currentRatio > targetRatio) {
      // 4.开始缩放网页 （高度比例进行缩放，宽度居中）
      document.body.style = `transform: scale(${scaleRatioByY}) translateX(-50%); left: 50%`
    } else {
      // 4.开始缩放网页 （宽度比例进行缩放）
      document.body.style = ` transform: scale(${scaleRatioByX})`
    }
  }
}
